import { createRef, Component, RefObject } from 'react'
import ArticleDisplay from '../../Components/ArticleDisplay'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import { Alert, Divider, message, Spin, Tag } from 'antd';
import { queryArticlesOnID } from '../../api/blog';
import Article from '../../types/Article';
import './concreteArticle.less'
import {
    ArrowUpOutlined,
    ClockCircleOutlined,
    FundViewOutlined,
    TagOutlined
} from '@ant-design/icons';
import moment from 'moment';

interface IProps extends RouteComponentProps<{ id: string }> { }
interface IState {
    article: Article;
    loading: boolean;
}
class ConcreteArticle extends Component<IProps, IState> {
    state = {
        article: {
            content: '',
            articleID: -1,
            views: -1,
            cate: {
                cateID: -1,
                cateName: ''
            },
            omit: true,
            title: '',
            time: ''
        },
        loading: true
    }

    async componentDidMount() {
        const articleID: number = parseInt(this.props.match.params.id);
        if (!articleID) {
            //NaN且非0
            message.error('非法url');
            this.props.history.push('/');
        }
        //请求具体文章    
        const data = await queryArticlesOnID(articleID);
        if (!data) {
            //页面依旧加载中，不加处理了
            return;
        }
        this.setState({
            article: data,
            loading: false
        })
        // 绑定是否出现
        this.container.current?.addEventListener('scroll', () => {
            if (!!this.container.current) {
                const toTop = document.getElementsByClassName('toTop')[0]
                if (!!toTop) {
                    if (this.container.current.scrollTop > 700) {
                        toTop.setAttribute("class", "toTop visible")
                    } else {
                        toTop.setAttribute("class", "toTop invisible")
                    }
                }
            }
        })
    }

    container: RefObject<HTMLDivElement> = createRef();
    backToTop = () => {
        const refIns = this.container.current;
        if (!!refIns) {
            let top = refIns.scrollTop;
            const timer = setInterval(() => {
                if (top < refIns.scrollTop) {
                    clearInterval(timer);
                    return;
                }
                refIns.scrollTop = top * 0.95;
                top = refIns.scrollTop; // 更新top
                if (top == 0) {
                    clearInterval(timer)
                }
            }, 10)
        }
    }

    render() {
        const { article, loading } = this.state;
        return (
            <div className="concreteArticleContainer" ref={this.container}>
                <Spin spinning={loading}>
                    <div className="toTop invisible" title='回到顶部' onClick={this.backToTop}>
                        <ArrowUpOutlined />
                    </div>
                    <div className="articleTitle">
                        <h1>{article.title}</h1>
                        {   //大于30天提示信息陈旧
                            moment().diff(moment(article.time), 'days') > 30
                                ?
                                (
                                    <Alert
                                        message={`文章上次编辑于${moment().diff(moment(article.time), 'days')}天前，不保证及时性，请谨慎阅读`}
                                        type="warning" showIcon closable
                                    />
                                )
                                :
                                (<></>)
                        }
                        <div className="articleLabelBox">
                            <Tag title="最后修改日期" color="blue" icon={<ClockCircleOutlined />}>{moment(article.time).format('YYYY-MM-DD')}</Tag>
                            <Tag title="浏览量" color="geekblue" icon={<FundViewOutlined />}>浏览量：{article.views}</Tag>
                            <Tag title="分类" color="purple" icon={<TagOutlined />}>{article.cate.cateName}</Tag>
                        </div>
                        <Divider />
                    </div>
                    <ArticleDisplay key={article.articleID} content={article.content} loading={loading} />
                </Spin>
            </div>
        )
    }
}

export default withRouter(ConcreteArticle)